<template>
  <!-- 组件结构 -->
  <div class="demo">
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge + 1 }}</h2>
    <button @click='updateAge'>修改年龄</button>
  </div>
</template>

<script>
// 组件交互代码

export default {
  name: "StudentStudent",
  data() {
    console.log(this);
    return {
      msg: "这是第一行信息",
      myAge:this.age
    }
  },
  methods:{
    updateAge(){
      this.myAge++
    }
  },
  // 简单声明接受
  props: ["name", "age", "sex"],
  // 接收到的属性不能修改

  // 接收同时对数据进行类型限制
  // props: {
  //   name: String,
  //   age: Number,
  //   sex: String,
  // },

  // 类型限制+默认值指定+必要性限制
  // props:{
  //   name:{
  //     type:String,//name类型
  //     required:true//是否必须
  //   },
  //   age:{
  //     type:Number,
  //     default:18
  //   },
  //   sex:{
  //     type:String,
  //     required:true
  //   }
  // }
};
</script>

<style>
/* 样式 */
.demo {
  background-color: aliceblue;
}
</style>

// 配置项props
// 功能：让组件接受外部传过来的数据
(1)传递数据：
  <Demo name='xxx'/>
(2)接收数据
    只接收：
      props:['name']
    限制类型：
      props:{
        name:String
      }
    限制类型、限制必要性、限制默认值
      props:{
        name:{
          type:String,
          required:true,
          defaule:'SONG'
        }
      }
props只读，Vue底层会检测对props的修改，如果进行了修改，就会发出警告，
如果业务需求确实需要修改，那么先复制props的内容到data中，然后去修改data中的数据